<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>给最爱的你的生日祝福</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Courier New', monospace;
        background-color: #0d1117;
        color: #c9d1d9;
        overflow-x: hidden;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background-image: radial-gradient(
            circle at 25% 25%,
            rgba(255, 0, 128, 0.1) 0%,
            transparent 55%
          ),
          radial-gradient(
            circle at 75% 75%,
            rgba(0, 255, 255, 0.1) 0%,
            transparent 55%
          );
      }

      .container {
        max-width: 500px;
        width: 100%;
        text-align: center;
        position: relative;
        z-index: 10;
      }

      .header {
        margin-bottom: 30px;
      }

      h1 {
        font-size: 2.5rem;
        color: #ff79c6;
        margin-bottom: 15px;
        text-shadow: 0 0 10px rgba(255, 121, 198, 0.5);
        animation: glow 2s infinite alternate;
      }

      .subtitle {
        font-size: 1.2rem;
        color: #8be9fd;
        margin-bottom: 20px;
      }

      .heart {
        position: relative;
        width: 100px;
        height: 90px;
        margin: 20px auto;
        animation: heartbeat 1.2s infinite;
      }

      .heart:before,
      .heart:after {
        position: absolute;
        content: '';
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: #ff5555;
        border-radius: 50px 50px 0 0;
        transform: rotate(-45deg);
        transform-origin: 0 100%;
      }

      .heart:after {
        left: 0;
        transform: rotate(45deg);
        transform-origin: 100% 100%;
      }

      .message-box {
        background-color: rgba(30, 30, 46, 0.8);
        border: 1px solid #44475a;
        border-radius: 10px;
        padding: 20px;
        margin: 20px 0;
        text-align: left;
        box-shadow: 0 0 15px rgba(139, 233, 253, 0.2);
        position: relative;
        overflow: hidden;
      }

      .message-box:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, #ff79c6, #8be9fd, #50fa7b);
      }

      .code-line {
        margin: 10px 0;
        font-size: 1rem;
      }

      .comment {
        color: #6272a4;
      }

      .string {
        color: #f1fa8c;
      }

      .keyword {
        color: #ff79c6;
      }

      .function {
        color: #50fa7b;
      }

      .footer {
        margin-top: 30px;
        font-size: 0.9rem;
        color: #6272a4;
      }

      /* 动画效果 */
      @keyframes glow {
        from {
          text-shadow: 0 0 10px rgba(255, 121, 198, 0.5);
        }
        to {
          text-shadow: 0 0 20px rgba(255, 121, 198, 0.8),
            0 0 30px rgba(255, 121, 198, 0.6);
        }
      }

      @keyframes heartbeat {
        0% {
          transform: scale(1);
        }
        25% {
          transform: scale(1.1);
        }
        50% {
          transform: scale(1);
        }
        75% {
          transform: scale(1.1);
        }
        100% {
          transform: scale(1);
        }
      }

      /* 烟花效果 */
      .firework {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        box-shadow: 0 0 10px 2px;
        z-index: 1;
      }

      /* 响应式调整 */
      @media (max-width: 480px) {
        h1 {
          font-size: 2rem;
        }

        .subtitle {
          font-size: 1rem;
        }

        .code-line {
          font-size: 0.9rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>Happy Birthday!</h1>
        <div class="subtitle">给我的最爱 ❤️</div>
      </div>

      <div class="heart"></div>

      <div class="message-box">
        <div class="code-line">
          <span class="comment">// 今天是一个特殊的日子</span>
        </div>
        <div class="code-line">
          <span class="keyword">function</span>
          <span class="function">celebrateBirthday</span>(myLove) {
        </div>
        <div class="code-line">
          &nbsp;&nbsp;<span class="keyword">let</span> happiness =
          <span class="string">"无限"</span>;
        </div>
        <div class="code-line">
          &nbsp;&nbsp;<span class="keyword">let</span> love =
          <span class="string">"永恒"</span>;
        </div>
        <div class="code-line">
          &nbsp;&nbsp;<span class="keyword">let</span> memories = [];
        </div>
        <div class="code-line">&nbsp;&nbsp;</div>
        <div class="code-line">
          &nbsp;&nbsp;<span class="keyword">while</span> (myLove.alive) {
        </div>
        <div class="code-line">&nbsp;&nbsp;&nbsp;&nbsp;happiness++;</div>
        <div class="code-line">
          &nbsp;&nbsp;&nbsp;&nbsp;love *= <span class="string">"∞"</span>;
        </div>
        <div class="code-line">
          &nbsp;&nbsp;&nbsp;&nbsp;memories.push(<span class="string"
            >"美好瞬间"</span
          >);
        </div>
        <div class="code-line">&nbsp;&nbsp;}</div>
        <div class="code-line">&nbsp;&nbsp;</div>
        <div class="code-line">
          &nbsp;&nbsp;<span class="keyword">return</span> {
        </div>
        <div class="code-line">
          &nbsp;&nbsp;&nbsp;&nbsp;wish:
          <span class="string">"生日快乐，我的公主！"</span>,
        </div>
        <div class="code-line">
          &nbsp;&nbsp;&nbsp;&nbsp;promise:
          <span class="string">"我会永远爱你，就像1+1=2一样确定"</span>
        </div>
        <div class="code-line">&nbsp;&nbsp;};</div>
        <div class="code-line">}</div>
        <div class="code-line">&nbsp;</div>
        <div class="code-line">
          <span class="comment">// 执行我们的爱情函数</span>
        </div>
        <div class="code-line">
          <span class="function">celebrateBirthday</span>(you);
        </div>
      </div>

      <div class="footer">
        <p>用代码写下的浪漫，比任何语言都真实</p>
        <p>爱你的程序员 ❤️</p>
      </div>
    </div>

    <audio id="bgMusic" loop autoplay>
      <!-- 使用一个稳定的外链音乐，这里使用了网易云音乐的外链 -->
      <source
        src="https://speediance.oss-cn-shenzhen.aliyuncs.com/ylsh.mp3"
        type="audio/mpeg"
      />
      您的浏览器不支持音频元素。
    </audio>

    <script>
      // 自动播放音乐
      const bgMusic = document.getElementById('bgMusic');
      let hasStarted = false;

      // 尝试自动播放
      bgMusic.play().catch(() => {
        // 如果自动播放被浏览器阻止，在用户首次点击页面时播放
        document.addEventListener('click', function playOnClick() {
          if (!hasStarted) {
            bgMusic.play();
            hasStarted = true;
            // 移除监听器，只需要点击一次
            document.removeEventListener('click', playOnClick);
          }
        });
      });

      // 烟花效果
      function createFirework() {
        const colors = [
          '#ff5555',
          '#ffb86c',
          '#f1fa8c',
          '#50fa7b',
          '#8be9fd',
          '#bd93f9',
          '#ff79c6',
        ];
        const firework = document.createElement('div');
        firework.className = 'firework';

        // 随机位置
        const x = Math.random() * window.innerWidth;
        const y = Math.random() * window.innerHeight;

        // 随机颜色
        const color = colors[Math.floor(Math.random() * colors.length)];

        firework.style.left = `${x}px`;
        firework.style.top = `${y}px`;
        firework.style.backgroundColor = color;
        firework.style.boxShadow = `0 0 10px 2px ${color}`;

        document.body.appendChild(firework);

        // 动画
        const size = Math.random() * 10 + 5;
        firework.style.width = `${size}px`;
        firework.style.height = `${size}px`;

        // 移除元素
        setTimeout(() => {
          firework.remove();
        }, 2000);
      }

      // 定期创建烟花
      setInterval(createFirework, 300);

      // 初始创建一些烟花
      for (let i = 0; i < 10; i++) {
        setTimeout(createFirework, i * 100);
      }

      // 添加点击创建烟花的效果
      document.addEventListener('click', function (e) {
        for (let i = 0; i < 5; i++) {
          setTimeout(() => {
            createFireworkAt(e.clientX, e.clientY);
          }, i * 100);
        }
      });

      function createFireworkAt(x, y) {
        const colors = [
          '#ff5555',
          '#ffb86c',
          '#f1fa8c',
          '#50fa7b',
          '#8be9fd',
          '#bd93f9',
          '#ff79c6',
        ];
        const firework = document.createElement('div');
        firework.className = 'firework';

        const color = colors[Math.floor(Math.random() * colors.length)];

        firework.style.left = `${x}px`;
        firework.style.top = `${y}px`;
        firework.style.backgroundColor = color;
        firework.style.boxShadow = `0 0 10px 2px ${color}`;

        document.body.appendChild(firework);

        const size = Math.random() * 10 + 5;
        firework.style.width = `${size}px`;
        firework.style.height = `${size}px`;

        setTimeout(() => {
          firework.remove();
        }, 2000);
      }
    </script>
  </body>
</html>
